<template>
	<div>
		<div class="main" id="main"></div>
	</div>
</template>

<script setup>
	import * as echarts from "echarts";
	import { onMounted, ref } from "vue";
	let timList = ref([]);
	let dataList = ref([]);

	onMounted(() => {
		echat();
	});
	const echat = () => {
		console.log("123456");
		let myChart = echarts.init(document.getElementById("main"));
		myChart.setOption({
			tooltip: {
				trigger: "axis"
			},
			legend: {},
			grid: {
				left: "3%",
				right: "4%",
				bottom: "3%",
				containLabel: true
			},

			xAxis: {
				type: "category",
				axisLabel: {
					interval: 0 // 设置为0表示刻度都显示
				},
				boundaryGap: false,
				data: timList.value
			},
			yAxis: {
				type: "value"
			},
			series: [
				{
					type: "line",
					stack: "Total",
					data: dataList.value,
					// data: [120, 132, 101, 134, 90, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230, 230],
					lineStyle: {
						color: "#FF9D42"
					}
				}
			]
		});

		// console.log(document.querySelector('#main'));
	};
	defineExpose({
		timList,
		dataList,
		echat
	});
</script>
<style lang="scss" scoped>
	.main {
		height: 400px !important;
		width: 100%;
	}

	.canvas {
		height: 400px !important;
		width: 100%;
	}
</style>
